• হোম
• সার্ভিস
• যোগাযোগ
• সম্পর্কে
• kt_satt_skill_example_id=1229

সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার

একটি সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার তৈরি করিঃ

kt_satt_skill_example_id=1232

দ্রষ্টব্যঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।

হরিজন্টাল নেভিগেশন বার

হরিজন্টাল নেভিগেশনবার তৈরির ২টি পদ্ধতি আছে। inline, float লিস্ট স্টাইল ব্যবহার করে।

ইনলাইন লিস্ট আইটেম

< li> এলিমেন্টকে ইনলাইন ডিফাইন করেঃ

kt_satt_skill_example_id=1234

উদাহরণের বর্ণনাঃ

• display: inline; - ডিফল্টভাবে লিস্ট আইটেমগুলো ব্লক এলিমেন্ট হিসেবে থাকে। আমরা এখানে লিস্টকে একই লাইনে দেখানোর জন্য আইটেমের উভয় পাশের লাইনব্রেক সরিয়ে দিলাম

ফ্লোটিং লিস্ট আইটেম

float ব্যবহার করেও হরিজন্টাল নেভিগেশনবার তৈরি করা যায়ঃ

kt_satt_skill_example_id=1237

উদাহরণের বর্ণনাঃ

• float: left; ব্যবহার করে ব্লক এলিমেন্টকে একটির পাশে আরেকটিকে রাখা হয়েছে
• display: block; লিঙ্কগুলোকে ব্লক এলিমেন্ট হিসেবে এবং সম্পূর্ণ এড়িয়াকে ক্লিকযোগ্য করে তোলে
• padding: 5px; সৌন্দর্যের জন্য ব্লক এলিমেন্টগুলোর চারপাশে প্যাডিং ডিফাইন করা হয়েছে
• background-color: aqua; রঙয়ের ব্যাকগ্রাউন্ড কালার দেয়া হল

হরিজন্টাল নেভিগেশন বারের উদাহরণ

একটি সাধারণ হরিজন্টাল নেভিগেশনবার তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1243

এক্টিভ/কারেন্ট নেভিগেশন লিংক

ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ

kt_satt_skill_example_id=1248

রাইট-এলাইন লিংক

লিস্ট আইটেমে float:right; ব্যবহার করে রাইট-এলাইন লিংক তৈরি করা হলঃ

kt_satt_skill_example_id=1250

লিংক ডিভাইডার

< li> এর মধ্যে border-right প্রোপার্টি যুক্ত করে লিঙ্ক ডিভাইডার তৈরি করা হয়ঃ

kt_satt_skill_example_id=1252

ফিক্সড নেভিগেশন বার

ইউজার যদি পেজকে স্ক্রল করে তবুও নেভিগেশন বার পেজের উপরে অথবা নিচে ফিক্সড থাকবেঃ

kt_satt_skill_example_id=1258

kt_satt_skill_example_id=1261

বিঃদ্রঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।

বর্ডারসহ হরিজন্টাল নেভিগেশনবার

হালকা ধূসর বর্ডারসহ একটি ধূসর হরিজন্টাল নেভিগেশন বারের উদাহরণঃ

kt_satt_skill_example_id=1264